<div class="layui-row">
  <div class="layui-col-lg3">
    <div class="layui-btn-group" id="device_handle_permi">
      <button class="layui-btn data_handle_btn">添加</button>
      <!-- <button class="layui-btn device_deliver">转移</button> -->
      <!-- <button type="button" class="layui-btn" id="file_input_btn"><i class="layui-icon"></i>文件导入</button> -->
    </div>
  </div>
  <div class="layui-col-lg3">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" l name="search_key"  placeholder="名称/ID" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
            </div>
        </div>
    </form>
  </div>
</div>

<table class="layui-table" id="base_info_manage_table" lay-filter="base_info_manage_table"></table>
<script type="text/html" id="table_info_handle_bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="table_header">
  <p>地图管理表</p>
</script>

<!-- 添加数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="handle_data_form" style="padding: 20px;display: none;">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" lay-verify="required" lay-reqtext="必填项!" placeholder="保存后，禁止重复/更改" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">编号</label>
      <div class="layui-input-inline">
        <input type="text" name="name_id" placeholder="地图自定义编号" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>


  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">类型</label>
      <div class="layui-input-inline">
        <input name="kind" id="map_kind" type="text"  placeholder="" autocomplete="off" class="layui-input" readonly="">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remark"  autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-block">
      <label type="button" class="layui-form-label layui-bg-green" id="upload_file">上传地图文件</label>
      <div class="layui-input-block">
        <input type="text" name="content" id="content" lay-verify="required" lay-reqtext="必填项!" list="content_list" placeholder="内容" autocomplete="off" class="layui-input" onchange="show_map_content(this)" style="width: 85%" readonly="">
      </div>   
    </div>
    <!-- <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">内容</label>
      <div class="layui-input-block">
        <input type="text" name="content" lay-verify="required" lay-reqtext="必填项!" list="content_list" placeholder="内容" autocomplete="off" class="layui-input" onchange="show_map_content(this)">
        <datalist id="content_list">
        </datalist>
      </div>
    </div> -->
  </div>


  <div class="layui-form-item">
    <div id="map_content_show" style="width:90%;height:280px;" ></div>
    <!-- <img type="text" src="" style="width:95%;height:280px" id="map_content_show"> -->
  </div>

  <div class="layui-form-item">

    <button class="layui-btn layui-btn-fluid layui-btn-normal" style="width: 90%" lay-submit="" lay-filter="add_submit" id="submit_btn">提交</button>
  </div>
</form>

<!-- 添加数据表单结束 -->

<!-- js代码开始 -->
<!-- <script type="text/javascript" src="/static/fmap_SDK_v2.7.0_Standalone/fengmap.min.js"></script> -->
<script type="text/javascript">
// if(user_permi==='normal'){
//   $('#device_handle_permi').hide()
// }
var ajax_url='map_manage'
// 设备数据表格渲染函数
var table_show=function(table_data){
  console.log(map_data)
  table.render({
    elem: '#base_info_manage_table',
    toolbar:'#table_header',
    data: table_data,
    id:'base_info_manage_table',
    cols: [[
        {type: "checkbox", fixed: "left"},
        // {field: 'id', title: 'ID',width:20,sort:true},
        {field: 'name', title: '名称',sort:true},
        {field: 'name_id', title: '编号',sort:true},
        {field: 'content',title: '内容',sort:true,templet:function(d){
          return '<button class="layui-btn layui-btn-fluid layui-btn-sm" onclick="show_table_map_data(\''+d.content+'\')">查看</button>'
        }},
        {field: 'kind', title: '类型',sort:true,templet:function(d){
          var map_name=d.kind
          if(d.kind=='bd_map'){
            map_name='百度地图'
          }
          return map_name
        }},
        {field: 'remark', title: '备注'},
        {field: 'date_added', title: '添加时间',sort:true},
        {title: '操作', minWidth: 110, templet: '#table_info_handle_bar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

var show_table_map_data=function(content){
  var div_content;
  var f_name=content.split('.')[0]
  var l_name=content.split('.')[1]
  if(l_name=='fmap'){
    setTimeout(function(){
      open_fmap("map_"+f_name,f_name)
    },500)
    div_content='<div id="map_'+f_name+'" style="width:100%;height:100%;" ></div>'
  }else{
    div_content='<img src="/static/map_data/'+user_self_name+'/'+content+'" style="width:100%;height:100%;">'
  }

  layer.open({
        type: 1
        ,title:content+'-地图信息'
        ,area:['750px','600px']
        ,offset:'60px'  
        ,id: 'show_map_data' //防止重复弹出
        ,content:div_content
        ,shade: 0 //不显示遮罩
      });
}




// 首次用户数据加载
get_info_ajax(ajax_url,'get_init_data',table_show)

// 监听添加按钮点击,打开弹窗
$(".data_handle_btn").on("click", function () {
    // document.getElementById("handle_data_form").reset();
    form.render();
    // 人员图片上传功能
    layer.open({
        type: 1
        ,title:'新增地图信息'
        ,area:['750px','600px']
        ,offset:'60px'  
        ,id: 'add_data' //防止重复弹出
        ,content:$('#handle_data_form')
        ,shade: 0 //不显示遮罩
        ,success:function(){
          file_upload_func('upload_file',handle_upload_file)//加载文件上传功能
        }
      });
});

//处理上传的地图文件
var file_detail=null
var handle_upload_file=function(index, file, result){
  file_detail=result;
  var file_name=file.name
  $('#content').val(file_name)
  var file_kind=file_name.split('.')[1]
  $('#map_kind').val(file_kind)
  var f_name=file_name.split('.')[0]
  if(file_kind=='fmap'){
    open_fmap('map_content_show',f_name)
  }else{
    var map_picture='<img type="text" src="'+result+'" style="width:95%;height:280px">'
    $('#map_content_show').append(map_picture)
  }

}

// ----打开fmap地图start---- //

var open_fmap=function(div_id,file){
    fn_map = new fengmap.FMMap({
    //渲染dom
    container: document.getElementById(div_id),
    //地图数据位置
    // mapServerURL: '/static/map_data/',
    defaultMapScaleLevel: 19,
    //开发者申请应用下web服务的key
    key: '9ba50831cbdde4f07c79740dae2959ff',
    //开发者申请应用名称
    appName: 'map测试',
   });
  fn_map.openMapById(file);
}

// ----打开fmap地图end---- //

// ----显示地图内容start---- //
var show_map_content=function(e){
  $('#map_content_show').empty()
  var file_name=e.value
  var file_kind=file_name.split('.')[1]
  var f_name=file_name.split('.')[0]
  if(file_kind=='fmap'){
    open_fmap('map_content_show',f_name)
  }else{
    var map_picture='<img type="text" src="/static/map_data/'+user_self_name+'/'+file_name+'" style="width:95%;height:280px">'
    $('#map_content_show').append(map_picture)
  }
}
// ----显示地图内容end---- //


// ----添加功能start----//

form.on('submit(add_submit)',function(obj){
  var result = obj.field
  // if(map_file_list.indexOf(result.content)==-1){
  //   layer.msg('请加载正确的地图文件')
  //   return false
  // }
  var base_info={}
  base_info['name_id']=result['name_id']
  base_info['name']=result['name']
  base_info['kind']=result['content'].split('.')[1]
  if(file_detail==null){
    layer.msg('文件为空，请重新上传')
    return
  }
  base_info['content']=result['content']
  base_info['file_detail']=file_detail
  base_info['remark']=result['remark']
  // console.log(base_info)
  post_info_ajax(base_info,ajax_url,'add')
  return false
})

// ----添加功能end----//


// ----监听编辑按钮，转到编辑地图页面start---- //
table.on('tool(base_info_manage_table)', function (obj) {
  var map_to_edit=obj.data
  // console.log(map_to_edit)
  if(obj.event=='edit'){
    layui.data('map_to_edit',{key:'map_to_edit',value:JSON.stringify(map_to_edit)})
    var map_kind=map_to_edit.kind
    var page_name='fmap_map'
    if(map_kind!=='fmap'){
      page_name='png_map'
    }
    window.history.pushState(null, null, "/index/#"+page_name)
    turn_to_page(page_name)
  }else if(obj.event=='del'){
    layer.confirm("确定删除地图："+map_to_edit.name+"？",
              {btn: ['是', '否']}, 
              function (index) {
                post_info_ajax(map_to_edit,ajax_url,'del',table_show)
              }
              ,function(){
                console.log('no')
                layer.closeAll()
              });
  }
});

// ----监听编辑按钮，转到编辑地图页面end---- //

// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {

  var search_key = data.field['search_key'];
  if(search_key!==''){
    // 调用index页面搜索函数
    //console.log(search_key,map_data)
    var search_result=search_func(map_data,search_key,'name','name_id')
    // 表格重载
    table_show(search_result)
  }else{
    table_show(map_data)
  }
  return false;
});

</script>